<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3857 - OL4加载天地图xyz服务展示地图</title>
    <!--    <script src="../lib/ol4/ol4.js"></script>-->
    <script src='../lib/ol6.4.3/ol.js'></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map"></div>
</body>
<script>
    const projection = ol.proj.get('EPSG:3857');
    const url = `http://t4.tianditu.com/DataServer?T=img_w&tk=a6bf5a2496115f58481b947040c83ae3&x={x}&y={y}&l={z}`;
    const xyzSource = new ol.source.XYZ({
        url,
        projection,
        wrapX: false
    });
    // 图层
    const baseLayer = new ol.layer.Tile({
        source: xyzSource
    });
    const circlePoint = ol.proj.transform([120.01016360059053, 30.282672319591747], 'EPSG:4326', 'EPSG:3857');
    // console.log(circlePoint);
    const points = [
        [0, 0],
        [12955887.989156704, 4849958.044121415],
        [120.01016360059053, 30.282672319591747]
    ];
    const centerPoint = ol.proj.transform(points[2], 'EPSG:4326', 'EPSG:3857');

    const iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(centerPoint)
    });

    const iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [10, 26],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            src: '../image/position_orange.png'
        })
    });

    iconFeature.setStyle(iconStyle);

    const vectorSource = new ol.source.Vector({
        features: [iconFeature],
        wrapX: false
    });

    const iconLayer = new ol.layer.Vector({
        source: vectorSource
    });

    const map = new ol.Map({
        layers: [
            baseLayer,
            iconLayer
        ],
        target: 'map',
        view: new ol.View({
            center: centerPoint,
            projection,
            zoom: 17,
            maxZoom: 19,
            minZoom: 1
        })
    });
    map.on('click', evt => {
        console.log(evt);
    });

    let p1 = [13066469.382609066, 4725236.658862736];
    let p2 = [13066230.981718596, 4725052.13804968];
    const lineGeo = ol.geom.LineString([p1, p2]);
    console.log(lineGeo);

    let metersPerUnit = map.getView().getProjection().getMetersPerUnit();
    console.log(metersPerUnit);
    // let circleRadius =  meters / metersPerUnit;

    const sourceProj = map.getView().getProjection();
    console.log(sourceProj);

    console.log(ol.sphere.getDistance([13066469.382609066, 4725236.658862736], [13066230.981718596, 4725052.13804968]) / 1000);

</script>
</html>
